<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state练习-简易轮播图</title>
    <style>
        .container{
            width: 640px;
            margin: 100px auto;
            height: 360px;
            position: relative;
        }

        .container > div{
            width: 60px;
            height: 60px;
            background: white;
            position: absolute;
            border-radius: 50%;
            top: 150px;
            text-align:center;
            line-height: 60px;
            user-select: none;
            cursor: pointer;
        }

        .container > .next{
            right: 0;
        }
    </style>
</head>
<body>
    <div id="root"> </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

    <script type="text/babel">
        class App extends React.Component{

            state = {
                num: 1, //显示图片的编号

                images: [
                    './images/abc.jpg',
                    './images/xyz.jpg',
                    './img/xxxx.jpg',
                ],
                index: 0
                //images[0]  images[1]  images[2]
            }

            //执行次数  ( 1 + N )
            render(){
                return <div className="container">
                        <img width="100%" src={"./images/"+this.state.num+".jpg"} alt=""/>
                        <div class="prev" onClick={this.prev}>&lt;</div>
                        <div class="next" onClick={this.next}>&gt;</div>
                    </div>
            }

            //声明事件回调 上一张
            prev = () => {
                let {num} = this.state;
                //判断
                if(num > 1){
                    num = num - 1;
                }else{
                    num = 5;
                }
                //修改状态
                this.setState({
                    num
                })
            }

            //声明事件回调 下一张
            next = () => {
                // ./images/1.jpg     ./images/2.jpg
                //获取当前的编号
                let {num} = this.state;
                //判断
                if(num < 5){
                    num = num + 1;
                }else{
                    //设置为初始值
                    num = 1;
                }
                //更新状态
                this.setState({
                    num: num
                })
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>
</body>
</html>